<template>
  <div>
      <van-nav-bar left-arrow @click-left="back">
            <template #right>
                <form action="/">
                    <van-search
                        v-model="value"
                        show-action
                        placeholder="请输入搜索关键词"
                        ref="searchInput"
                        @focus="showTip"
                        @blur="hiddenTip"
                        @search="onSearch"
                    >
                      <template #action>
                        <div @click="onSearch">搜索</div>
                    </template>
                    </van-search>
                </form>
            </template>
     </van-nav-bar>

        <div id="search_box" v-show="!value">
            <van-divider />
            <p> 热门搜索 </p>
            <van-grid :gutter="10" square>
                <van-grid-item v-for="(item, index) in searchTips" :key="index" :text="item" icon="photo-o"  @click="tipSearch"/>
            </van-grid>
        </div>
        <!-- 商品小列表 -->
        <div id="search_tip_list" v-show="value && showTips"> 
            <van-cell-group inset>
                <van-cell v-for="item in 8" :key="item" :title="item" value="内容" label="描述信息"/>
            </van-cell-group>
        </div>

        <!-- 商品详细列表 -->
        <div id="search_list" v-show="value && !showTips && searchDetail">
             <van-dropdown-menu>
                <van-dropdown-item v-model="value1" :options="option1" />
                <van-dropdown-item v-model="value2" :options="option2" />
             </van-dropdown-menu>


             <div class="pro_filter_more">
                 <ul id="barTabs2" class="show_more">
                     <li class="item" v-for="(item, index) in single" :key="index">
                         <van-button round plain @click="singleClick">{{item}}</van-button>
                         <!-- <van-radio name="1">单选框 </van-radio> -->
                     </li>

                     <li class="item" v-for="(item, index) in more" :key="index">
                         <van-button round plain @click="popFilter(item)">{{index}}</van-button>
                         <!-- <van-radio name="1">弹出框</van-radio> -->

                     </li>
                 </ul>
                <van-popup v-model:show="popShow" position="bottom" closeable round :style="{ minHeight: '50vh'}">
                    <van-divider />
                        <div class="margin1vw">

                        <van-checkbox-group v-model="checked" direction="horizontal">
                            <van-checkbox v-for="(sec, index) in popDetail" :name="sec" :key="index"> {{sec}} </van-checkbox>
                        </van-checkbox-group>

                        </div>


                        <van-action-bar>
                            <van-action-bar-button type="warning" text="重置" @click="resetCheck"/>
                            <van-action-bar-button type="danger" text="确认" @click="okCheck" />
                        </van-action-bar>
                </van-popup>
             </div>

             <goods-list :goods="goods" />
        </div>


        

  </div>
</template>

<script>
import GoodsList from '/@//components/GoodsList.vue';
import { Toast1s } from '/@//utils/hit.js'
import { ref, computed, watch, reactive, onMounted, onUnmounted } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'

export default {
    name: "search",
    components: {
    GoodsList
    },
    setup() {
        
        const value1 = ref(0);
        const value2 = ref('a');
        const option1 = [
        { text: '全部商品', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 },
        ];
        const option2 = [
        { text: '默认排序', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' },
        ];
        const toOption = (op) => {
            let o = {};
            op.forEach((option) => {
                o[option.value] = option.text;
            })

            return o
        }
        const op1 = toOption(option1)
        const op2 = toOption(option2)

        console.log(op1, op2)
        const value = ref(null) // 搜索值
        const store = useStore()
        const showTips = ref(false)
        const searchDetail = ref(false)
        const searchInput = ref(null)
        const goods = computed(() => {
            return store.state.goods
        })

        const searchTips = store.state.searchTips

        const onSearch = () => {
            searchDetail.value = true
            hiddenTip()
            Toast1s("TODO：搜索逻辑"+value.value)
        }
        // const onCancel = () => {
        //     value.value = ""
        //     Toast1s('取消');
        // }

        const tipSearch = (e) => {
            console.log(e.target.innerText)
            value.value = e.target.innerText
            searchInput.value.focus()
        }

        const showTip = () => {
            showTips.value = true
        }

        const hiddenTip = () => {
            showTips.value = false
        }



        const searchCfg = {
            searchInput, searchTips, tipSearch, showTips, showTip, hiddenTip, searchDetail
        }

        const dataRender = { value1,value2,option1,option2,value, goods }
        
        // search filter
        const checked = ref([]);
        watch(checked, (n, o) => {
            console.log("新", n)
            console.log("旧", o)
        })

        const resetCheck = () => {
            checked.value = [];
        }
        const okCheck = () => {
            if(checked.value.length > 0) {
                popShow.value = false
                console.log("checked", checked.value)
                Toast1s("确认")
            }
        }

        const router = useRouter()
        const back = () => {
            router.back()
        }
        // search filter one
        store.commit("setSearchUserCfgOne", op1[value1.value])
        watch(value1, (n, o) => {
            const t = op1[n]
            store.commit("removeSearchUserCfgOne", op1[o])
            store.commit("setSearchUserCfgOne", t)
            
        })
        store.commit("setSearchUserCfgOne", op2[value2.value])
        watch(value2, (n, o) => {
            const t = op2[n]
            store.commit("removeSearchUserCfgOne", op2[o])
            store.commit("setSearchUserCfgOne", t)
            
        })

        // search filter more
        const single = computed(() => store.getters.getSingle)
        console.log("single", single)
        const more = store.getters.getMore
        console.log("more", more)

        const singleClick = (e) => {
            store.commit("toggleSearchUserCfgMore", e.target.innerText)
            if(store.getters.getFilterCfg(e.target.innerText)){
                e.target.style.backgroundColor = "#ff040430";
            } else  {
                e.target.style.backgroundColor = "#fff";
            }
        }

        const popShow = ref(false)
        const popDetail = ref(null)
        const popFilter = (item) => {
            popShow.value = true
            console.log(item)
            popDetail.value = item
        }
        onUnmounted(() => {
console.log('onUnmounted')
})
        onMounted(() => {
console.log('onMounted')
        })


        const filter = {singleClick, checked, popFilter, popShow, popDetail, resetCheck, okCheck, single, more }


        return { ...searchCfg, ...dataRender, onSearch,  ...filter, back }
    }
}
</script>

<style lang="less">

    #search_box {
        margin-bottom: 0;
        padding-left: 13px;
        margin-top: 15px;
    }
    .pro_filter_more{
        text-align: center;
    }

    .pro_filter_more .show_more {
        overflow: hidden;
        overflow-x: auto;
        padding-left: 10px;
        padding-right: 10px;
        vertical-align: text-top;
        white-space: nowrap;
        z-index: 2;
    }

    .item:hover {

    }

    .pro_filter_more .show_more .item{
        background-color: #f2f2f7;
        float: none;
        display: inline-block;
        padding-right: 6px;
        vertical-align: top;
        text-align:center;
    }

    .pro_filter_more .item {
        font-size: 12px;
    }


    .van-checkbox-group--horizontal {
        margin-left: 2vw;
        justify-content: space-between;
    }

    .van-checkbox--horizontal {
        flex-basis: 44vw;
        margin-bottom: 45px;
    }

    .van-action-bar {
        position: absolute;
    }

    ::-webkit-scrollbar {
        height: 0;
        width: 0;
        color: transparent;
    }
</style>